{% extends 'backend_layout.html' %}
{% block css %}
    <style>
        .form-horizontal .control-label {
            padding-top: 7px;
            margin-bottom: 0;
            text-align: right;
        }
        .avatar-container{
            height: 200px;
            width: 200px;
            padding: 2px;
            border: 1px solid #dddddd;
            position: relative;
        }
        .avatar-container img{
            height: 100%;
            width: 100%;
            border: 0;
            overflow: hidden;
        }
        .avatar-container .text{
            text-align: center;
        }
        .avatar-container .img-file{
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            position: absolute;
            z-index: 102;
            height: 195px;
            width: 195px;
        }
    .relative{
        position: relative;
    }
    .error_msg{
        position: absolute;
        z-index: 10;
        top: 15%;
        right: 10%;
        background-color: white;
        color: red;
    }
    .title_error{
        right: 50% !important;
    }
    </style>
{% endblock %}
{% block conent %}
    <ol class="breadcrumb">
        <li><a href="#">用户管理</a></li>
        <li class="active">用户信息</li>
    </ol>
    <div>

        <div class="row" style="position: relative;">
            <form id="baseinfo_form" class="form-horizontal">
                 {% csrf_token %}
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">用户名</label>

                        <div class="col-xs-5">
                            <p class="form-control-static">{{ user_obj.username }}</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2 control-label">邮箱</label>

                        <div class="col-xs-5">
                            <p class="form-control-static">{{ user_obj.email }}</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nickname" class="col-xs-2 control-label">昵称</label>

                        <div class="col-xs-5 relative">
                            <input type="text" class="form-control" id="nickname" name="nickname" placeholder="请输入昵称" value="{{ user_obj.nickname }}">
                            <div class="error_msg" error="nickname"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="blogUrl" class="col-xs-2 control-label">博客地址</label>
                        <div class="col-xs-5 relative">
                            <input type="text" class="form-control" id="blogUrl" name="blog_url"
                                   placeholder="如：wupeiqi,则个人博客为http://www.xxx.com/wupeiqi.html" value="{{ blog_obj.site }}">
                            <div class="error_msg" error="blog_url"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="blogTheme" class="col-xs-2 control-label">博客主题</label>

                        <div class="col-xs-5">
                            <select id="blogTheme" name="blog_theme" class="form-control" >
                                <option>默认主题</option>
                                <option>红色火焰</option>
                                <option>嘿嘿哈嘿</option>
                                <option>哈哈哈嘿哈</option>
                                <option>编不出来了</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="blogTitle" class="col-xs-2 control-label">博客标题内容</label>

                        <div class="col-xs-8 relative">
                            <textarea id="blogTitle" name="blog_title" style="min-height: 100px" class="form-control"
                                      placeholder="来一杯鸡汤...">{{ blog_obj.title }}</textarea>
                            <div class="error_msg title_error" error="blog_title"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-offset-2 col-xs-10">
                            <button type="submit" role="base_info" class="btn btn-primary">保 存</button>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="avatar" value="{% if user_obj.avatar %} {{ user_obj.avatar }} {% else %}/static/upload/avatar/default.png {% endif %}">
            </form>
            <div style="position: absolute;" class="col-xs-offset-7 col-xs-5">
                <div class="avatar-container">
                    <form id="avatar_form" action="/backend/upload_avatar/" method="post"  target="ifml" enctype="multipart/form-data">
                        {% csrf_token %}
                        <img style="height: 195px; width: 195px" origin="{% if user_obj.avatar %} {{ user_obj.avatar }} {% else %}/static/upload/avatar/default.png {% endif %}" src="{% if user_obj.avatar %} {{ user_obj.avatar }} {% else %}/static/upload/avatar/default.png {% endif %}">
                        <div class="text">点击图片更换(<a href="#" id="revoke_avatar">撤销</a>)</div>
                        <input id="avatarImg" name="avatarImg" type="file" class="img-file" />
                    </form>
                    <iframe  name="ifml" style="display: none"></iframe>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="/static/js/jquery-1.12.4.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <script src="/static/js/common.js"></script>
    <script src="/static/js/backend.js"></script>
    <script src="/static/js/account.js"></script>
    <script>



    </script>
{% endblock %}